<template>
  <div id="courseCover">
    <div class="course-wrap">
      <el-card class="box-card">
        <div class="course--wrap-item clearfix" v-if="courseData">
          <div class="fl l-img">
            <img :src="coverImg(courseData)" class="fl" />
          </div>
          <div class="fl r-txt">
            <p class="title one-ellipsis">
              {{ courseData.title }}
            </p>
            <div class="txt-info">
              <p class="txt-row clearfix">
                <span class="fl row-name">单位：</span>
                <span class="fl row-cont col">{{ deptName(courseData) }}</span>
              </p>
              <p class="txt-row clearfix">
                <span class="fl row-name">建设团队：</span>
                <span class="fl row-cont col">{{ teamInfo(courseData) }}</span>
              </p>
              <p class="txt-row clearfix">
                <span class="fl row-name">简介：</span>
                <span
                  class="fl row-cont col three-ellipsis"
                  v-if="courseData.content"
                  v-html="courseData.content"
                ></span>
                <span v-else class="fl row-cont col three-ellipsis">暂无数据</span>
              </p>
            </div>
            <div class="txt-score">
              <Score v-if="courseId" :resId="courseId" :resType="1" />
              <div class="clearfix txt-ico">
                <LookDown txtShow :count="courseData.evaluateVO" size="5" />
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { openApiSysCourseQuery } from "@/api/openApi";
import setInfo from "@/mixins/setInfo.js";
export default {
  mixins: [setInfo],
  components: {
    LookDown: () => import("@/components/home/lookDown.vue"),
    Score: () => import("@/components/home/score.vue"),
  },
  data() {
    return {
      value: 4.5,
      courseId: "",
      courseData: null,
      userId: this.$store.getters.userId,
      listQuery: {
        page: 1,
        limit: 99,
        courseId: "",
      },
    };
  },
  watch: {
    $route(v) {
      this.courseId = this.$store.getters.courseId;
      this.getInfo();
    },
  },
  mounted() {
    this.courseId = this.$store.getters.courseId;
    this.getInfo();
  },
  methods: {
    getInfo() {
      if (!this.courseId) return;
      openApiSysCourseQuery({ id: this.courseId }).then((res) => {
        this.courseData = res.data.data[0];
      });
    },
  },
};
</script>
<style  lang="scss" >
#courseCover {
  background: #fff;
  width: 100%;
  .course-wrap {
    width: 1400px;
    margin: 0 auto;
    padding-top: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    .el-card__body {
      padding: 0px;
    }
    .course--wrap-item {
      height: 360px;
      .l-img {
        width: 540px;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          display: inherit;
        }
      }
      .r-txt {
        position: relative;
        background: #fff;
        width: 795px;
        height: 300px;
        padding: 0 30px;
        .title {
          border-bottom: 1px solid #d8d5d5;
          line-height: 74px;
          color: #ac100f;
          font-size: 22px;
          font-weight: 900;
        }
        .col {
          color: #666;
        }
        .txt-info {
          margin-top: 15px;

          .txt-row {
            width: 100%;
            margin-bottom: 15px;
            .row-cont {
              width: 80%;
            }
            .four-ellipsis {
              height: 100px;
              line-height: 24px;
            }
          }
        }
        .txt-score {
          p {
            .start {
              margin-right: 20px;
            }
          }
          .txt-ico {
            margin-top: 10px;
            .icon-share {
              height: 24px;
              line-height: 24px;
              display: inline-block;
              span {
                i {
                  color: #8c8c8c;
                  font-size: 16px;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>